<template>
	<div class="card-view" >
		<div class="item-card fadeIn" v-for="(item,index) in userTravels"
		@click="juMp(item._id)"
		>
			<img :src="item.cover_image.url" class="cover-image"/>
			<div class="cover-adress global-display global-a-items">
				<img src="@/icon/index/address.png"/>
				<span class="text-show">{{item.address}}</span>
			</div>
		</div>
	</div>
	<!-- 如果没有数据 -->
	<van-empty
		v-if="userTravels.length <= 0"
		image="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/icon/kong-zhuang-tai.png"
		image-size="80"
		:description="tip"
	/>
</template>

<script setup>
	import {ref} from 'vue'
	defineProps({
		userTravels: {type:Array,required:true},
		tip:{type:String,required:true}
	})
	import { useRouter,useRoute } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	const $route = useRoute();
	import emitter from '@/api/event.js'
	function juMp(_id){
		// 获取跳转的路由：如果用户点击了详情页的推荐就向详情页触发响应
		if($route.path === '/details-page'){
			emitter.emit('details-response',{_id});
			$router.replace({
			  path: $route.path,
			  query: Object.assign({}, $route.query, { _id })
			});
		}else{
			$router.push({path: '/details-page', query: {_id}})
		}
	}
</script>

<style scoped>
.card-view{
	display: grid; 
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 3px;
}
.item-card{
	height: 180px;
	position: relative;
}
.cover-image{
	width: 100%;
	height: 180px;
	display: block;
	object-fit: cover;
}
.cover-adress{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 0 10px 10px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.cover-adress img{
	width: 12px;
	height: 12px;
	display: block;
}
.cover-adress span{
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	padding-left: 5px;
}
</style>